<template>
  <div id="app">
    <div id="container">
      <div class="row row-placeTop row-bg">
        <div class="wrapper">
          <div class="extra">
            <div class="action">
              <a
                href="javascript:void(0)"
                _iswg="0"
                _mddid="14674"
                data-act="want_go"
                class="btn-collect"
              >
                收藏
              </a>
              <a
                href="javascript:void(0)"
                _ispa="0"
                _mddid="14674"
                data-act="set_path"
                class="btn-been"
              >
                <i class="icon"></i>
                去过
              </a>
            </div>
          </div>
          <div class="crumb">
            <div class="item">
              <a href="./destination.html">目的地</a>
              <em>&gt;</em>
            </div>
            <div class="item">
              <a href="./destination_detail.html?id=5e2ab4f48847000059006e10">
                中国
              </a>
              <em>&gt;</em>
            </div>
            <div class="item">
              <a href="./destination_detail.html?id=5e2ab4f48847000059006e2f">
                安徽
              </a>
              <em>&gt;</em>
            </div>
            <div class="item">
              <div class="drop">
                <span class="hd">
                  <a href="javascript:;">
                    马鞍山
                    <i></i>
                  </a>
                </span>
                <div class="bd">
                  <i class="arrow"><b></b></i>
                  <div class="col">
                    <ul class="clearfix">
                      <li>
                        <a href="JavaScript:;">马鞍山概括</a>
                      </li>
                      <li>
                        <a
                          href="./destination_detail.html?id=5e2ab4f48847000059006f11#travel"
                        >
                          马鞍山游记
                        </a>
                      </li>
                      <li>
                        <a
                          href="./destination_detail.html?id=5e2ab4f48847000059006f11#strategy"
                        >
                          马鞍山攻略
                        </a>
                      </li>
                      <li>
                        <a href="javascript:;">马鞍山跟团游</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <em>&gt;</em>
            </div>
            <div class="item cur"><strong>马鞍山概览</strong></div>
          </div>
          <div class="title" style="position: relative;">
            <h1>马鞍山</h1>
            <a href="javascript:;" class="num-photo"></a>
            <br />
            <span class="en">Ma'anshan</span>
            <div style="position: absolute; top: 3px; right: 220px;">
              <img
                src="../../public/img/wKgED1v-df2Ab5KFAAFioLPYatQ535.png"
                style="width: 390px;"
              />
            </div>
          </div>
          <div class="place-navbar" style="border-top: 0px;">
            <div class="navbar-con">
              <ul class="navbar clearfix navbar-first-level-warper">
                <li class="navbar-overview city-guide">
                  <a href="javascript:;" class="navbar-btn">
                    <i class="navbar-icon"></i>
                    <span>概况</span>
                  </a>
                </li>
                <li class="navbar-line">
                  <a
                    href="./destination_detail.html?id=5e2ab4f48847000059006f11#travel"
                    class="navbar-btn"
                  >
                    <i class="navbar-icon"></i>
                    <span>游记</span>
                  </a>
                </li>
                <li class="navbar-line">
                  <a
                    href="./destination_detail.html?id=5e2ab4f48847000059006f11#strategy"
                    class="navbar-btn navbar-local"
                  >
                    <i class="navbar-icon"></i>
                    <span>攻略</span>
                  </a>
                </li>
                <li class="navbar-line">
                  <a href="javascript:;" class="navbar-btn navbar-sales">
                    <i class="navbar-icon"></i>
                    <span>跟团游</span>
                  </a>
                </li>
              </ul>
              <div
                class="overview-drop hide"
                style="height: auto; overflow: hidden;"
              >
                <div class="drop-bd"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagelet-block">
        <div class="row row-local row-bg">
          <div class="wrapper">
            <h2 class="r-title">
              <a href="javascript:;" name="strategy">马鞍山攻略</a>
            </h2>
            <div class="local-pro">
              <ul class="clearfix"></ul>
            </div>
            <div class="r-more" @click="$router.push('strategyIndex')">
              <a href="javascript:viod(0)">查看全部</a>
            </div>
          </div>
        </div>
      </div>
      <div class="pagelet-block">
        <div class="row row-travels">
          <div class="wrapper">
            <div class="navbar clearfix">
              <ul class="tn-nav">
                <li class="active">
                  <h2 class="r-title">
                    <a href="javascript:;" name="travel">马鞍山游记</a>
                  </h2>
                </li>
              </ul>
            </div>
            <div class="relcontent yj" style="display: block;">
              <form id="travelForm">
                <div class="navbar-sub clearfix">
                  排序：
                  <select name="orderType" class="com-opt">
                    <option value="1">最新</option>
                    <option value="2">最热</option>
                  </select>

                  人均花费：
                  <select name="perExpendType" class="com-opt">
                    <option value="-1">不限</option>
                    <option value="1">1-999</option>
                    <option value="2">1K-6K</option>
                    <option value="3">6K-20K</option>
                    <option value="4">20K以上</option>
                  </select>

                  出行天数：
                  <select name="dayType" class="com-opt">
                    <option value="-1">不限</option>
                    <option value="1">3天以下</option>
                    <option value="2">4-7天</option>
                    <option value="3">8-14天</option>
                    <option value="4">15天以上</option>
                  </select>
                </div>
              </form>
              <div class="_notelist">
                <div id="travelPage" class="tn-list">
                  <br />
                  <br />
                  <div style="float: right;">
                    <div style="float: left;">
                      <span style="line-height: 30px;">
                        共1页 / 0条&nbsp;&nbsp;&nbsp;
                      </span>
                    </div>
                    <div
                      id="pagination"
                      class="jq-pagination"
                      style="display: inline;"
                    >
                      <a
                        class="prev disabled"
                        href="javascript:void(0);"
                        jp-role="prev"
                        jp-data="0"
                      >
                        上一页
                      </a>
                      <a
                        href="javascript:void(0);"
                        jp-role="page"
                        jp-data="1"
                        class="active"
                      >
                        1
                      </a>
                      <a
                        class="next disabled"
                        href="javascript:void(0);"
                        jp-role="next"
                        jp-data="2"
                      >
                        下一页
                      </a>
                      <a
                        class="last disabled"
                        href="javascript:void(0);"
                        jp-role="last"
                        jp-data="1"
                      >
                        尾页
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagelet-block">
        <div class="row row-placeList">
          <div class="wrapper">
            <h2 class="r-title">马鞍山周边【拓展】</h2>
            <div class="bd">
              <ul class="clearfix">
                <li class="item">
                  <div class="img">
                    <img
                      height="200"
                      width="320"
                      src="../../public/img/wKgB3FGMgSCAZo0qAAgGckFTqJA54.jpeg"
                      class="lazy"
                      style="display: inline;"
                    />
                  </div>

                  <dl class="caption">
                    <dt>
                      <a href="javascript:;">
                        <strong>香港</strong>
                        <br />
                        <b>40576</b>
                        人去过
                      </a>
                    </dt>
                    <dd>
                      <a href="javascript:;">香港迪士尼乐园</a>
                      <span class="divide"></span>
                      <a href="javascript:;">太平山顶</a>
                      <span class="divide"></span>
                      <a href="javascript:;">香港海洋公园</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;">
                      <img
                        height="200"
                        width="320"
                        src="../../public/img/wKgB3FECAVCANTk_AAWNVF8sjYw25.jpeg"
                        class="lazy"
                        style="display: inline;"
                      />
                    </a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;">
                        <strong>深圳</strong>
                        <br />
                        <b>33108</b>
                        人去过
                      </a>
                    </dt>
                    <dd>
                      <a href="javascript:;">东部华侨城</a>
                      <span class="divide"></span>
                      <a href="javascript:;">西涌海滩</a>
                      <span class="divide"></span>
                      <a href="javascript:;">世界之窗</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;">
                      <img
                        height="200"
                        width="320"
                        src="../../public/img/wKgB6lP0VpCADPDPAAPICO-I-Iw57.jpeg"
                        class="lazy"
                        style="display: inline;"
                      />
                    </a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;">
                        <strong>珠海</strong>
                        <br />
                        <b>17660</b>
                        人去过
                      </a>
                    </dt>
                    <dd>
                      <a href="javascript:;">
                        珠海长隆海洋王国
                      </a>
                      <span class="divide"></span>
                      <a href="javascript:;">外伶仃岛</a>
                      <span class="divide"></span>
                      <a href="javascript:;">情侣路</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;">
                      <img
                        height="200"
                        width="320"
                        src="../../public/img/wKgB4lIlVk6AIMCDAAStueA6sSU73.jpeg"
                        class="lazy"
                        style="display: inline;"
                      />
                    </a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;">
                        <strong>惠州</strong>
                        <br />
                        <b>7214</b>
                        人去过
                      </a>
                    </dt>
                    <dd>
                      <a href="javascript:;">双月湾</a>
                      <span class="divide"></span>
                      <a href="javascript:;">巽寮湾</a>
                      <span class="divide"></span>
                      <a href="javascript:;">惠州西湖</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;">
                      <img
                        height="200"
                        width="320"
                        src="../../public/img/wKgB6lRZ5s6ARJzuAAjCwdIPcK865.jpeg"
                        class="lazy"
                        style="display: inline;"
                      />
                    </a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;">
                        <strong>佛山</strong>
                        <br />
                        <b>9649</b>
                        人去过
                      </a>
                    </dt>
                    <dd>
                      <a href="javascript:;">顺德清晖园</a>
                      <span class="divide"></span>
                      <a href="javascript:;">佛山祖庙</a>
                      <span class="divide"></span>
                      <a href="javascript:;">岭南天地</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;">
                      <img
                        height="200"
                        width="320"
                        src="../../public/img/wKgB3FIMRvaAdrjoAAGCmIetJvQ75.jpeg"
                        class="lazy"
                        style="display: inline;"
                      />
                    </a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;">
                        <strong>韶关</strong>
                        <br />
                        <b>6248</b>
                        人去过
                      </a>
                    </dt>
                    <dd>
                      <a href="javascript:;">丹霞山</a>
                      <span class="divide"></span>
                      <a href="javascript:;">广东大峡谷</a>
                      <span class="divide"></span>
                      <a href="javascript:;">南华禅寺</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;">
                      <img
                        height="200"
                        width="320"
                        src="../../public/img/wKgB4lMO9uuAbh9fAAKP4vgV8Os70.jpeg"
                        class="lazy"
                        style="display: inline;"
                      />
                    </a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;">
                        <strong>东莞</strong>
                        <br />
                        <b>10353</b>
                        人去过
                      </a>
                    </dt>
                    <dd>
                      <a href="javascript:;">下坝坊</a>
                      <span class="divide"></span>
                      <a href="javascript:;">松山湖风景区</a>
                      <span class="divide"></span>
                      <a href="javascript:;">可园博物馆</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;">
                      <img
                        height="200"
                        width="320"
                        src="../../public/img/wKgB4lMNziCASS7YAADtzNGSAUU44.jpeg"
                        class="lazy"
                        style="display: inline;"
                      />
                    </a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;">
                        <strong>中山</strong>
                        <br />
                        <b>8276</b>
                        人去过
                      </a>
                    </dt>
                    <dd>
                      <a href="javascript:;">
                        孙中山故居纪念馆
                      </a>
                      <span class="divide"></span>
                      <a href="javascript:;">
                        中山城-中山影视城
                      </a>
                      <span class="divide"></span>
                      <a href="javascript:;">中山詹园</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;">
                      <img
                        height="200"
                        width="320"
                        src="../../public/img/wKgBEFqTegaAGG-GAAgeDCxhmAQ61.jpeg"
                        class="lazy"
                        style="display: inline;"
                      />
                    </a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;">
                        <strong>肇庆</strong>
                        <br />
                        <b>8276</b>
                        人去过
                      </a>
                    </dt>
                    <dd>
                      <a href="javascript:;">肇庆大山</a>
                      <span class="divide"></span>
                      <a href="javascript:;">肇庆影视城</a>
                      <span class="divide"></span>
                      <a href="javascript:;">詹园</a>
                    </dd>
                  </dl>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
/* @import '../css/base.css'; */
/* @import '../css/travelspot.css'; */
/* @import '../css/select.css'; */
/* @import '../css/jqPagination.css'; */
.row {
    padding: 40px 0;
    min-width: 980px;
    border-bottom: 1px solid #e4e4e4;
}

a:hover {
    outline: 0;
    text-decoration: underline;
    color: #ff8a00;
}

.row-bg {
    background-color: #fafafa;
}

.row-placeTop {
    padding: 0;
    background-color: #fafafa;
}

.tn-item:hover dt a {
    color: #ff9d00;
    text-decoration: none;
}

.tn-item dd a:hover {
    text-decoration: none;
    color: #666;
}

.wrapper {
    width: 1000px;
    margin: 0 auto;
}

.row-placeTop .extra {
    float: right;
    padding-top: 10px;
    text-align: right;
    position: relative;
    z-index: 2;
}

.row a {
    color: #643718;
}

.row-placeTop .action {
    margin-top: 25px;
}

.row-placeTop .btn-collect,
.row-placeTop .btn-been {
    display: inline-block;
    height: 30px;
    margin-left: 20px;
    color: #333;
    line-height: 15px;
    vertical-align: top;
    line-height: 30px;
    font-size: 14px;
}

.row-placeTop .icon {
    float: left;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    background: url(../../public/img/poiV3-sprite6.png) no-repeat -230px 0;
    overflow: hidden;
}

.row-placeTop .btn-been .icon {
    background-position: -230px -30px;
}

.crumb {
    height: 20px;
    padding: 15px 0;
    color: #666;
    font-size: 12px;
    line-height: 20px;
}

.crumb {
    width: 1000px;
    font: 12px Arial, "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", Tahoma, Helvetica, STHeiti, "Hiragino Sans GB";
    height: 20px;
    padding: 15px 0;
    color: #666;
    line-height: 20px;
    margin: 0 auto;
}

.crumb .item {
    float: left;
}

.crumb .item.cur {
    color: #ff7000;
}

.crumb .item a {
    color: #666;
    font-size: 12px;
}

.crumb .item em {
    margin: 0 6px;
    color: #999;
    font-family: 'simsun';
    font-style: normal;
}

.crumb .drop {
    float: left;
}

.crumb .drop .hd {
    height: 20px;
}

.crumb .drop .bd {
    position: absolute;
    display: none;
    margin: 5px 0 0 -10px;
    _margin: 20px 0 0 -70px;
    z-index: 20;
    padding: 10px 0 8px 7px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
}

.crumb .drop .hd a {
    display: block;
    height: 20px;
    _float: left;
    padding: 0 13px 0 5px;
}

.crumb .drop .hd i {
    position: absolute;
    margin: 8px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 3px solid #ff7000;
    border-left: 3px dashed transparent;
    border-right: 3px dashed transparent;
    overflow: hidden;
    font-size: 0;
}

.crumb .drop .bd .arrow {
    position: absolute;
    left: 20px;
    top: -6px;
    width: 0;
    height: 0;
    border-bottom: 6px solid #e5e5e5;
    border-left: 6px dashed transparent;
    border-right: 6px dashed transparent;
    font-size: 0;
}

.crumb .drop .col {
    float: left;
    width: 145px;
}

.crumb .drop .more {
    clear: both;
    padding: 10px 20px 0 0;
    text-align: right;
}

.crumb .drop .bd .arrow b {
    position: absolute;
    left: -6px;
    top: 2px;
    width: 0;
    height: 0;
    border-bottom: 6px solid #fff;
    border-left: 6px dashed transparent;
    border-right: 9px dashed transparent;
    font-size: 0;
    overflow: hidden;
}

.crumb .drop h3 {
    padding-left: 7px;
    color: #333;
}

.crumb .drop li {
    float: left;
    display: inline;
    width: 137px;
    margin: 4px 8px 0 0;
    height: 21px;
    line-height: 20px;
    overflow: hidden;
}

.crumb .drop li a {
    display: block;
    height: 21px;
    padding: 0 7px;
    color: #333;
}

.crumb .drop .more {
    clear: both;
    padding: 10px 20px 0 0;
    text-align: right;
}

.crumb .drop .more a {
    color: #ff7000;
}

.crumb .drop.open .bd {
    display: block;
}

.crumb .drop li a:hover,
.crumb .drop li.on a {
    background-color: #fff1d7;
    color: #ff7000;
    text-decoration: none;
}

.row-placeTop .title {
    margin: 0 0 20px;
}

.row-placeTop h1 {
    display: inline;
    margin-right: 15px;
    font-weight: normal;
    font-size: 40px;
    color: #333;
}

.row-placeTop .num-photo {
    color: #999;
    font-size: 14px;
}

.row-placeTop .en {
    font-size: 20px;
    color: #999;
}

.row-placeTop .num-photo em {
    font-style: normal;
    color: #ff9d00;
}

.place-navbar {
    height: 75px;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}

.row-placeTop .place-navbar {
    margin-bottom: 0;
    border-bottom: 0;
    z-index: 1001;
}

.place-navbar .navbar-con {
    width: 1000px;
    margin: 0 auto;
}

.place-navbar li[class|="navbar"] {
    float: left;
    display: inline;
    margin-right: 18px;
    font-size: 16px;
    line-height: 32px;
}

.place-navbar .navbar-btn {
    display: block;
    height: 32px;
    padding: 20px 0 23px;
    color: #666;
    font-size: 14px;
    line-height: 32px;
    position: relative;
}

.place-navbar .navbar-icon {
    float: left;
    width: 32px;
    height: 32px;
    margin-right: 6px;
    background: url(../../public/img/icon-place-nav6.png) no-repeat;
    overflow: hidden;
}

.navbar-overview .navbar-icon {
    background-position: 0 0;
}

.navbar-line .navbar-icon {
    background-position: 0 -40px;
}

.navbar-local .navbar-icon {
    background-position: 0 -200px;
}

.navbar-sales .navbar-icon {
    background-position: 0 -160px;
}

.navbar-scenic .navbar-icon {
    background-position: 0 -320px;
}

.navbar-hotels .navbar-icon {
    background-position: 0 -120px;
}

.overview-drop {
    position: absolute;
    margin-top: 7px;
    z-index: 1001;
    width: 798px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

.hide {
    display: none;
}

.overview-drop .drop-bd {
    padding: 30px 50px;
}

.overview-drop .drop-bd dl {
    padding-left: 125px;
    line-height: 36px;
}

.overview-drop .drop-bd dt {
    float: left;
    display: inline;
    margin: 0 0 0 -125px;
    width: 96px;
    color: #654939;
    font-size: 16px;
    height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-drop .drop-bd dd {
    font-size: 14px;
    color: #333;
}

.overview-drop .drop-bd dt a {
    color: #333;
}

.overview-drop .drop-bd dd a {
    float: none;
    height: auto;
    color: #333;
}

.overview-drop .drop-bd dd span {
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 13px;
    background-color: #ddd;
    vertical-align: middle;
    overflow: hidden;
    line-height: 100px;
}

.place-navbar-fixed {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    z-index: 100;
    box-shadow: 0 0 3px rgba(0, 0, 0, .4);
}

.row-bg {
    background-color: #fafafa;
}

.wrapper {
    width: 1000px;
    margin: 0 auto;
}

.row-local .r-title {
    margin-bottom: 30px;
    text-align: left;
    font-size: 26px;
    color: #333;
    font-weight: normal;
    line-height: 30px;
}

.row-local .r-more {
    clear: both;
    margin-top: 25px;
    text-align: center;
}

.local-pro ul {
    margin-right: -40px;
}

.local-pro li {
    float: left;
    width: 310px;
    display: inline;
    margin-right: 35px;
}

.local-pro .img {
    display: block;
    margin-bottom: 10px;
    height: 170px;
    overflow: hidden;
    position: relative;
}

.local-pro p {
    padding-left: 12px;
    font-size: 14px;
    color: #666;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.local-pro p:before {
    content: '';
    float: left;
    margin: 5px 0 0 -12px;
    display: inline-block;
    width: 2px;
    height: 10px;
    background-color: #ff9d00;
}

.local-pro .more {
    margin-top: 15px;
    border-top: 1px dashed #ebebeb;
    padding-top: 15px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

.a-link {
    display: inline-block;
    font-size: 14px;
    position: relative;
    padding-right: 15px;
    color: #ff9d00!important;
}

.icon-link {
    position: absolute;
    right: 0;
    top: 4px;
    display: inline-block;
    width: 13px;
    height: 13px;
    /* background: url(../../public/img/place-sprite8.png) no-repeat -45px 0; */
    overflow: hidden;
}

.row-local .r-more a {
    display: inline-block;
    border: 1px solid #ff9d00;
    border-radius: 4px;
    font-size: 14px;
    line-height: 40px;
    padding: 0 42px;
    color: #ff9d00;
}

.local-pro .title {
    margin-bottom: 5px;
    display: block;
    width: 320px;
    height: 28px;
    line-height: 28px;
    font-size: 18px;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.local-pro .title:hover {
    color: #ff9d00;
}

.local-pro .mark {
    position: absolute;
    left: 0;
    top: 10px;
    height: 30px;
    padding: 0 10px;
    background-color: #ff6262;
    line-height: 30px;
    color: #fff;
}

.local-pro .mark:after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    border-top: 15px solid #ff6262;
    border-right: 10px dashed transparent;
    border-bottom: 15px solid #ff6262;
}


/* .row {
    padding: 40px 0;
    min-width: 980px;
    border-bottom: 1px solid #e4e4e4;
} */

.row-travels .navbar {
    margin-bottom: 20px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
}

.tn-nav {
    float: left;
}

.tn-nav li {
    float: left;
    display: inline;
    margin-right: 28px;
}

.tn-nav li a {
    color: #666;
}

.tn-nav .active a {
    font-size: 18px;
    color: #333;
}

.row-travels .navbar-sub {
    height: 28px;
    margin-bottom: 15px;
}

.tn-dropdown {
    float: left;
    width: 120px;
    display: inline;
    margin-right: 5px;
    line-height: 28px;
    color: #666;
    position: relative;
}

.tn-dropdown .dropdown-trigger {
    padding: 0 13px;
    height: 28px;
    position: relative;
    z-index: 2;
    line-height: 28px;
    cursor: pointer;
}

.tn-dropdown .dropdown-menu {
    position: absolute;
    top: 0;
    border: 1px solid #d6d6d6;
    padding-top: 26px;
    width: 118px;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
}

.tn-dropdown .icon-dropdown {
    position: absolute;
    top: 11px;
    right: 13px;
    width: 12px;
    height: 6px;
    background-image: url(../../public/img/index-sprites3.png);
    background-position: 0 -30px!important;
    overflow: hidden;
}

.tn-dropdown .dropdown-menu ul {
    display: none;
}

.tn-dropdown .dropdown-menu li {
    margin: 1px 0;
    height: 28px;
}

.tn-dropdown .dropdown-menu a {
    display: block;
    padding: 0 12px;
    color: #666;
    cursor: pointer;
}

.tn-dropdown .dropdown-menu a:hover,
.tn-dropdown .dropdown-menu .active,
.tn-dropdown .dropdown-menu .on {
    background-color: #eee;
    text-decoration: none;
}

.tn-item {
    padding: 15px 0;
    height: 150px;
}

.tn-image {
    float: left;
    width: 220px;
    height: 150px;
    overflow: hidden;
    position: relative;
}

.tn-wrapper {
    float: right;
    width: 758px;
    height: 150px;
}

.tn-item dl {
    height: 117px;
}

.tn-item dt {
    height: 26px;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 26px;
}

.tn-item dt a.tn-from-app {
    float: right;
    width: auto!important;
    padding: 0 7px;
    border: 1px solid #ff9d00;
    border-radius: 11px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #ff9d00;
    font-weight: bold;
    overflow: visible;
    background-color: #fff;
    cursor: text;
}

.tn-item dt a {
    width: 420px;
    height: 26px;
    display: block;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tn-item dt a.tn-from-app+a {
    width: 360px;
}

.tn-item dt a.tn-from-app i {
    float: left;
    margin: 2px;
    width: 16px;
    height: 16px;
    background: url(../../public/img/index-sprites9.png) no-repeat -170px 0;
}

.tn-item dt a.tn-from-app img {
    position: absolute;
    right: -5px;
    top: 0;
    padding-top: 25px;
    width: 125px;
    display: none;
}

.tn-item dd {
    height: 60px;
    line-height: 20px;
    font-size: 14px;
    overflow: hidden;
}

.tn-item dd a {
    color: #666;
    

}

.tn-extra {
    height: 33px;
    overflow: hidden;
    line-height: 33px;
}

.tn-extra .tn-ding {
    float: right;
    color: #ff9d00;
    font-size: 14px;
    text-align: right;
}

.tn-extra span {
    display: inline-block;
}

.tn-extra .btn-ding {
    display: inline-block;
    float: right;
    margin-left: 8px;
    width: 38px;
    height: 33px;
    background-position: -60px 0!important;
    overflow: hidden;
}

.tn-write .btn-add i,
.tn-extra .btn-ding,
.tn-extra .tn-place i,
.tn-extra .tn-nums i {
    background: url(../../public/img/index-sprites3.png) no-repeat;
}

.tn-extra .tn-ding em {
    font-style: normal;
}

.tn-extra .tn-user {
    margin-right: 10px;
}

.tn-extra .tn-user img {
    margin-right: 5px;
    width: 16px;
    height: 16px;
    overflow: hidden;
    border-radius: 50%;
    vertical-align: -3px;
}

.tn-extra .tn-nums {
    font-size: 14px;
    color: #999;
}

.tn-extra .tn-nums i {
    float: left;
    margin: 10px 5px 0 0;
    width: 18px;
    height: 14px;
    background-position: -30px -50px!important;
}

.row-placeList .bd ul {
    margin-right: -25px;
    *zoom: 1;
}

.row-placeList .item {
    float: left;
    width: 320px;
    height: 346px;
    display: inline;
    margin: 0 20px 30px 0;
}

.row-placeList .img {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.row-placeList .caption {
    height: 125px;
    padding: 10px 20px;
    border: 1px solid #f2f2f2;
    border-top: 0 none;
}

.row-placeList dt {
    padding: 5px 0 12px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
    line-height: 20px;
}

.row-placeList dd {
    height: 20px;
    margin-top: 15px;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
}

.row-placeList dt a {
    display: block;
    color: #999;
}

.row-placeList dt strong {
    font-size: 24px;
    font-weight: normal;
    color: #333;
    line-height: 30px;
}

.row-placeList dt b {
    color: #ff9d00;
}

.row-placeList dd a {
    color: #666;
}

.row-placeList .divide {
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #dadada;
    margin: 0 10px;
    overflow: hidden;
}

.row-placeList dt a:hover {
    text-decoration: none;
}

.row-placeList dd a:hover {
    color: #ff9d00;
}

.row-placeList .r-title {
    margin-bottom: 35px;
    text-align: left;
    font-size: 26px;
    color: #333;
    font-weight: normal;
    line-height: 30px;
}

.row-placeList .item:hover {
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}

.row-placeList .item:hover strong {
    color: #ff9d00;
}

.tn-dropdown.dropdown-open {
    z-index: 5;
}

.tn-dropdown.dropdown-open .dropdown-trigger {
    color: #ff9d00;
}

.tn-dropdown.dropdown-open .dropdown-menu {
    border-color: #ff9d00;
}

.tn-dropdown.dropdown-open .dropdown-menu ul {
    display: block;
    margin: 6px 0;
    height: 240px;
}


</style>
